<template>
	<view>
		<!-- 博客展示 -->
			<u-gap height="20" bg-color="#ffffff"></u-gap>
			<!-- 头像 昵称 属地 关注 -->
			<view class="class01" >
				<view class="touxiang">
					<view class="u-m-r-10">
						<u-avatar :src=user.userImg size="140"></u-avatar>
					</view>
				</view>
				
				<view class="nichengIP">
					<view class="nicheng">
						<view class="u-font-19 u-p-b-20">{{user.userName}}</view>
					</view>
					<view class="IP">
						<view class="u-font-14 u-tips-color">IP:{{user.city}}</view>
					</view>
				</view>
				
				<view class="guanzhu">
					<view class="u-m-l-10 u-p-10">
						<u-button @click="guanzhu()">{{txt}}</u-button>
					</view>
				</view>
			</view>
			<!-- 头像，博客主体之间的分割线 -->	
			<u-line color="#d5d5d5" /> 
			
			<!-- 博客：标题 主体 图片 -->
			<view class="allboke">
				<view class="boke">
					<view class="bokeTitle"> 
						<text class="titleText" >{{user.title}}</text>
					</view>
					
					<u-line color="#d5d5d5" /> <!-- 标题与正文分割线 -->
					
					<view class="bokeBody">  <!-- 主题 -->
						<text >{{user.content}}</text>
					</view>
				</view>
				<image :src=user.blogImg class="boke_pic"></image>
			</view>
			
			<!-- 博客主体，点赞关注之间的分割线 -->
			<u-line color="#d5d5d5" /> 
			
			<u-grid :col="3" clss="dianzan">
				<u-grid-item>
					<image mode="aspectFill" style="width:20px;height: 20px;"
					src="../../static/点赞黑.png"  ></image>
					<view class="grid-text">{{user.favornum}}点赞</view>
				</u-grid-item>
				<u-grid-item>
					<image mode="aspectFill" style="width:20px;height: 20px;"
					src="../../static/评论黑.png"  ></image>
					<view class="grid-text">{{user.commentsnum}}评论</view>
				</u-grid-item>
				<u-grid-item>
					<image mode="aspectFill" style="width:20px;height: 20px;"
					src="../../static/收藏黑.png" ></image>
					<view class="grid-text">{{user.collectnum}}收藏</view>
				</u-grid-item>
			</u-grid>
			
			
			
			
			
			<!-- 展示评论 -->
			<view v-for="(item,index) in comments" :key="item.userId" class="class01">
				<view class="touxiang">
					<view class="u-m-r-10">
						<u-avatar :src=item.userImg size="140"></u-avatar>
					</view>
				</view>
				
				<view class="nichengIP">
					<view class="nicheng">
						<view class="u-font-19 u-p-b-20">{{item.userName}}</view>
					</view>
					<view class="IP">
						<view class="u-font-14 u-tips-color">IP:{{item.city}}</view>
					</view>
				</view>
				<view>
					<text>{{item.comment}}</text>
				</view>
				
			</view>
	</view>
</template>
userImg
<script>
	export default {
		data() {
			return {
				myId:getApp().globalData.globalUserid,
				txt:"关注",			//未关注则显示“关注”，已关注则显示“已关注”
				txtcolor:"",
				user:[{
					userId:1,  //用户id
					userName:"涂某某", //用户昵称
					city:"中国", //ip属地
					userImg:'../../static/头像1.jpg', //头像路径（就这个路径，数字从0到5）
					blogImg:'../../static/风景1.jpg',//博客图片（（就这个路径，数字从1到6）
					title:"荷塘月色", //博客标题
					content:"路上只我一个人，背着手踱着。这一片天地好像是我的;我也像超出了平常旳自己，到了另一世界里。我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫旳月下，什么都可以想，什么都可以不想，便觉是个自由的人。"
					,
					blogId:1, //博客id
					favornum:10,  //点赞数
					collectnum:5, //收藏数
					commentsnum:2, //评论数
					sign:"" //个性签名
					}
				],  // 声明一个变量用于保存传递过来的值
				comments:[{
					userId:1,
					userName:"涂某某", //用户昵称
					city:"中国", //ip属地
					userImg:'../../static/头像1.jpg', //头像路径（就这个路径，数字从0到5）
					comment:"hahaha"
				},
				{
					userId:2,
					userName:"涂某某", //用户昵称
					city:"中国", //ip属地
					userImg:'../../static/头像1.jpg', //头像路径（就这个路径，数字从0到5）
					comment:"hahaha"
				},
				{
					userId:3,
					userName:"涂某某", //用户昵称
					city:"中国", //ip属地
					userImg:'../../static/头像1.jpg', //头像路径（就这个路径，数字从0到5）
					comment:"hahaha"
				}
]
			}
		},
		onLoad(query) {
			//加载全局变量
			getApp().globalData.globalUserid;
			console.log("博客展示onLoad的全局userId:"+getApp().globalData.globalUserid);
			if (query.item) {
				this.user = JSON.parse(decodeURIComponent(query.item));
				console.log(this.user);
				}
		},
		onShow(){
		getApp().globalData.globalUserid;
		console.log("博客展示onShow的全局userId:"+getApp().globalData.globalUserid);
		},
		methods: {
			//点击关注
			guanzhu(){
				console.log(this.myId);
				console.log(this.user.userId);
			}
			
			
		}
	}
</script>

<style>
	.class01{				//装头像,昵称,IP,关注
		width:100vw;
		height:150rpx;
		background: #ffffff;
		display:flex;
		flex-direction: row;
	}
	.touxiang{			//装头像
		width:20vw;
		height:150rpx;
		background: #ffffff;
	}
	.nichengIP{			//装昵称IP
		width:50vw;
		height:150rpx;
		background: #ffffff;
	
	}
	.guanzhu{
		width:30vw;
		background: #ffffff;
	}
	.nicheng{		//昵称
		width:20vw;
		height:70rpx;
		background: #ffffff;
	}
	.IP{			//IP
		width:20vw;
		height:50rpx;
		background: #ffffff;
	}
	.bodyText{
		width:60vw;
		height:250rpx;
	}
	.boke{				//装博客 标题 容器的样式
		width:60vw;
		height:400rpx;
		background: #ffffff;
	} 
	.bokeTitle{		//博客标题
		width:100vw;
		background: #ffffff;

	}
	.titleText{		//博客标题的样式
		font-size: 20px;
		text-align:"center";
	}
	.bokeBody{		//博客主体
		width:100vw;
		background: #ffffff;
	
	}
	.allboke{    			//装博客+博客图片的容器样式
		width:100vw;
		background: #ffffff;

		}
	.boke_pic{			//博客图片
		width:100vw;
		background: #ffffff;
	}
	
</style>
